<template>
  <!-- 一匙通 -->
  <div class="key-links">
    <div class="key-links-title endbox">
      <div class="top-back" @click="goBack"></div>
    </div>
    <div class="key-links-content">
      <div class="left">
        <!-- 整站授权 -->
        <div class="zzsq-box borderStyle">
          <TotalAuthorization @handleAddRecord="handleAddRecord" />
        </div>
        <!-- 增加记录 -->
        <div class="zjjl-box borderStyle">
          <AddRecord
            @handleAddtodo="handleAddtodo"
            @handleAddauth="handleAddauth"
            v-if="addRecordStatus"
          />
        </div>
      </div>
      <div class="right">
        <!-- 授权记录 -->
        <div class="sqjl-box borderStyle">
          <AuthorizeRecord v-if="addauthStatus" />
        </div>
        <!-- 待办 -->
        <div class="db-box borderStyle">
          <ToDoList @handleAddauth="handleAddauth" v-if="addtodoStatus" />
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import TotalAuthorization from "./components/TotalAuthorization.vue";
import AddRecord from "./components/AddrRecord.vue";
import AuthorizeRecord from "./components/AuthorizeRecord.vue";
import ToDoList from "./components/ToDoList.vue";
import { LocksAPIModule } from "@/store/modules/locks";
@Component({
  components: {
    TotalAuthorization,
    AddRecord,
    AuthorizeRecord,
    ToDoList,
  },
})
export default class extends Vue {
  addRecordStatus: boolean = true; //增加记录状态
  addauthStatus: boolean = true; //授权记录状态
  addtodoStatus: boolean = true; //待办状态

  mounted() {
    LocksAPIModule.getUser();
    LocksAPIModule.getDeviceItem();

  }

  //   返回
  public goBack(val: string) {
    this.$router.push("index");
  }
  handleAddRecord() {
    this.addRecordStatus = false;
    this.addRecordStatus = true;
  }
  handleAddauth() {
    this.addauthStatus = false;
    this.addauthStatus = true;
  }
  handleAddtodo() {
    this.addtodoStatus = false;
    this.addtodoStatus = true;
  }
}
</script>

<style lang="scss" scoped>
.key-links {
  width: 100%;
  height: 100%;
  &-title {
    width: 100%;
    height: 0.4rem;
    .top-back {
      width: 0.9rem;
      height: 0.3rem;
      background: url("../../../../assets/img/return.png") no-repeat center
        center;
      background-size: 100% 100%;
      cursor: pointer;
      margin-left: 0.15rem;
    }
  }
  &-content {
    width: 100%;
    height: calc(100% - 0.4rem);
    display: flex;
    .right,
    .left {
      width: 7.64rem;
      height: 100%;
      margin-left: 0.2rem;
      .zzsq-box {
        width: 100%;
        height: 50%;
      }
      .zjjl-box {
        width: 100%;
        height: calc(50% - 0.2rem);
        margin-top: 0.2rem;
      }
      .sqjl-box {
        width: 100%;
        height: calc(100% - 3.56rem);
      }
      .db-box {
        width: 100%;
        height: 3.36rem;
        margin-top: 0.2rem;
      }
    }
  }
}
</style>